
<template>
    <div id="container" style="width:78vw;height:80vh;"></div>
</template>
<script>
import {MP} from '@/map.js'  
import  echarts from "echarts/lib/echarts";
import 'echarts/extension/bmap/bmap'
import {airData, convertData} from './mapData'
export default {
    data () {
      return {
        ak:"5k8tGSFKlQ5gOujzbWaxSPcaEpkNQgxD",
        map: null
      }
    },
    mounted(){
        MP(this.ak).then(BMap=>{
            this.map = new BMap.Map('container')
            let  point = new BMap.Point(116.404, 39.915)
            this.map.centerAndZoom(point, 15)
            this.map.enableScrollWheelZoom(true) 
            this.$nextTick(() => {
                let  option = {
                    title: {
                        text: '全国地市流量图 - 百度地图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    bmap: {
                        center: [104.114129, 37.550339],
                        zoom: 5,
                        roam: true,
                        mapStyle: {
                        styleJson: [
                            {
                                featureType: 'water',
                                elementType: 'all',
                                stylers: {
                                    color: '#d1d1d1'
                                }
                            },
                            {
                                featureType: 'land',
                                elementType: 'all',
                                stylers: {
                                    color: '#f3f3f3'
                                }
                            },
                            {
                                featureType: 'railway',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off'
                                }
                            },
                            {
                                featureType: 'highway',
                                elementType: 'all',
                                stylers: {
                                    color: '#fdfdfd'
                                }
                            },
                            {
                                featureType: 'highway',
                                elementType: 'labels',
                                stylers: {
                                    visibility: 'off'
                                }
                            },
                            {
                                featureType: 'arterial',
                                elementType: 'geometry',
                                stylers: {
                                    color: '#fefefe'
                                }
                            },
                            {
                                featureType: 'arterial',
                                elementType: 'geometry.fill',
                                stylers: {
                                    color: '#fefefe'
                                }
                            },
                            {
                                featureType: 'poi',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off'
                                }
                            },
                            {
                                featureType: 'green',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off'
                                }
                            },
                            {
                                featureType: 'subway',
                                elementType: 'all',
                                stylers: {
                                    visibility: 'off'
                                }
                            },
                            {
                                featureType: 'manmade',
                                elementType: 'all',
                                stylers: {
                                    color: '#d1d1d1'
                                }
                            },
                            {
                                featureType: 'local',
                                elementType: 'all',
                                stylers: {
                                    color: '#d1d1d1'
                                }
                            },
                            {
                                featureType: 'arterial',
                                elementType: 'labels',
                                stylers: {
                                    visibility: 'off'
                                }
                            },
                            {
                                featureType: 'boundary',
                                elementType: 'all',
                                stylers: {
                                    color: '#fefefe'
                                }
                            },
                            {
                                featureType: 'building',
                                elementType: 'all',
                                stylers: {
                                    color: '#d1d1d1'
                                }
                            },
                            {
                                featureType: 'label',
                                elementType: 'labels.text.fill',
                                stylers: {
                                    color: '#999999'
                                }
                            }
                        ]
                        }
                    },
                    series: [
                        {
                            name: 'traffic',
                            type: 'scatter',
                            coordinateSystem: 'bmap',
                            data: convertData(airData),
                            symbolSize: function (val) {
                                return val[2] / 10;
                            },
                            encode: {
                                value: 2
                            },
                            label: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                label: {
                                        show: true
                                }
                            }
                        },
                        {
                            name: 'Top 5',
                            type: 'effectScatter',
                            coordinateSystem: 'bmap',
                            data: convertData(
                                airData
                                .sort(function (a, b) {
                                    return b.value - a.value;
                                })
                                .slice(0, 6)
                            ),
                            symbolSize: function (val) {
                                return val[2] / 10;
                            },
                            encode: {
                                value: 2
                            },
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            label: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: '#333'
                            },
                            emphasis: {
                                scale: true
                            },
                            zlevel: 1
                        }
                    ],
                }
                let myChart = echarts.init(document.getElementById('container'))
                myChart.setOption(option);
            })
        })
    },
}
</script>